// 学生信息页面,类比图书管理案例

// 把渲染学生信息列表的功能封装成方法
function renderStudentList() {
    // 发送ajax并渲染
    axios({
        method: 'get',
        url: '/student/list'
    }).then(({ data: res }) => {
        if (res.code == 0) {
            let arr = res.data.map(item => `
            <tr>
                <th scope="row">${item.id}</th>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td>${item.group}</td>
                <td>${item.phone}</td>
                <td>${item.salary}120000</td>
                <td>${item.truesalary}14000</td>
                <td>${item.province + item.city + item.county}</td>
                <td>
                <button type="button" class="btn btn-primary btn-sm update" data-bs-toggle="modal" data-id='${item.id}' 
                    data-bs-target="#updateModal">修改</button>
                <button type="button" class="btn btn-danger btn-sm delete" data-id='${item.id}'>删除</button>
                </td>
            </tr>`
            )
            document.querySelector('tbody').innerHTML = arr.join('')
        }
    })
}
// 函数不调用不执行,页面加载的时候要渲染一次
renderStudentList()
const tbody = document.querySelector('tbody')

// 需求2:删除功能(事件委托)
tbody.addEventListener('click', function (e) {
    // 必须是删除按钮才能触发
    if (!e.target.classList.contains('delete')) return
    if (!confirm('你确定要删除吗?')) return
    const id = e.target.dataset.id;
    // alert(id)
    axios({
        method: 'delete',
        url: '/student/delete',
        params: { id }, // 查询参数
    }).then(({ data: res }) => {
        // 判断业务状态码是否为 0
        if (res.code == 0) {
            toastr.success('恭喜您,删除学生信息成功!')
            //    重新渲染数据
            renderStudentList()
        }
    });
})

// 需求3:省市县三级联动渲染
//      3.1省的渲染不需要事件触发(页面加载直接渲染)
//      3.2市的渲染需要省的改变才能触发渲染(省change事件)
//      3.3县的渲染需要市的改变才能触发渲染(市change事件)

// 封装一个方法,可以改变模块中的省市县
function setCity(id) {
    // 3.1省的渲染不需要事件触发(页面加载直接渲染)
    // 渲染到select标签中;(获取添加模块中的,name属性为province的select标签)
    const select1 = document.querySelector(`${id} [name="province"]`);
    const select2 = document.querySelector(`${id} [name="city"]`);
    const select3 = document.querySelector(`${id} [name="county"]`);
    axios({
        method: 'get',
        url: '/geo/province',
    }).then(({ data: res }) => {
        // 省市县返回的数据,没有业务状态码,所以不需要判断
        //console.log(res);//res本身就是省份组成的数组,直接map渲染这个数组
        // 根据省份,产生一个一个的option(多少个省份,就产生多少个option)
        const arr = res.map(item => `<option value="${item}">${item}</option>`)
        // 添加--省-- ;arr.unshift();是在所有元素最前面添加一个元素
        arr.unshift(`<option value="">--省--</option>`)
        // 渲染到select标签中;(获取添加模块中的,name属性为province的select标签)
        select1.innerHTML = arr.join('')
    });
    // 3.2市的渲染需要省的改变才能触发渲染(省change事件)
    select1.addEventListener('change', function () {
        // 省份发生改变,无论有没有选择空,县都要清空
        select3.innerHTML = select3.innerHTML = '<option value="">--区/县--</option>'
        // 省份为空,不要发送ajax
        if (this.value == '') {
            select2.innerHTML = '<option value="">--市--</option>'
            select3.innerHTML = select3.innerHTML = '<option value="">--区/县--</option>'
            return
        }

        axios({
            method: 'get',
            url: '/geo/city',
            params: {
                pname: this.value//通过pname传递省份的名称
            }
        }).then(({ data: res }) => {
            // 省市县返回的数据,没有业务状态码,所以不需要判断了
            //console.log(res);//res本身就是市区组成的数组,直接map渲染这个数组
            // 根据市区,产生一个一个的option(多少个市区,就产生多少个option)
            const arr = res.map(item => `<option value="${item}">${item}</option>`)
            // 添加--市-- ;arr.unshift();是在所有元素最前面添加一个元素
            arr.unshift(`<option value="">--市--</option>`)
            // 渲染到select标签中;(获取添加模块中的,name属性为province的select标签)
            select2.innerHTML = arr.join('')
        });
    })
    // 3.3县的渲染需要市的改变才能触发渲染(市change事件)
    select2.addEventListener('change', function () {
        // 市区为空,不要发送ajax
        if (this.value == '') {
            select3.innerHTML = '<option value="">--区/县--</option>'
            return
        }

        axios({
            method: 'get',
            url: '/geo/county',
            params: {
                pname: select1.value,//通过pname传递省份的名称
                cname: this.value//通过cname传递市区的名称
            }
        }).then(({ data: res }) => {
            // 省市县返回的数据,没有业务状态码,所以不需要判断了
            //console.log(res);//res本身就是县组成的数组,直接map渲染这个数组
            // 根据县,产生一个一个的option(多少个省份,就产生多少个option)
            const arr = res.map(item => `<option value="${item}">${item}</option>`)
            // 添加--县-- ;arr.unshift();是在所有元素最前面添加一个元素
            arr.unshift(`<option value="">--区/县--</option>`)
            // 渲染到select标签中;(获取添加模块中的,name属性为province的select标签)
            select3.innerHTML = arr.join('')
        });
    })
}
// 调用 - 添加模块和修改模块需要改变里面的省市县
setCity('#addModal')
setCity('#updateModal')

// 需求4:添加学生信息;(此处不再校验)
function add(id,a,b,txt) {
    const formAdd = document.querySelector(`#${id} form`);
    formAdd.addEventListener('submit', function (e) {
        e.preventDefault()
        axios({
            method: a,
            url: b,
            // 请求体参数  $(this).serialize() 需要获取的数据都有name属性
            data: $(this).serialize(),
        }).then(({ data: res }) => {
            // 判断业务状态码是否为 0
            if (res.code == 0) {
                // console.log(res);
                // 成功提示
                toastr.success(`恭喜您,${txt}学生信息成功!`)
                // 重新渲染
                renderStudentList()
                // 清空表单
                formAdd.reset()
                // 关闭对话框
                let btn = document.querySelector(`#${id} .btn-close`);
                btn.click()
            }
        });
    })
}
add('addModal','post','/student/add','添加')

// 需求5:修改学生信息
// 需要先获取学生信息
tbody.addEventListener('click', function (e) {
    // 必须是修改按钮才能触发
    if (!e.target.classList.contains('update')) return
    // if (!confirm('你确定要删除吗?')) return
    const id = e.target.dataset.id;
    // alert(id)
    // 发送ajax渲染数据
    axios({
        method: 'get',
        url: 'student/one',
        params: { id }//查询参数
    }).then(({ data: res }) => {
        // 判断业务状态码是否为 0
        if (res.code == 0) {
            // 先给简单的属性赋值
            // console.log(res);
            document.querySelector('#updateModal [name="name"]').value = res.data.name
            document.querySelector('#updateModal [name="age"]').value = res.data.age
            document.querySelector('#updateModal [name="phone"]').value = res.data.phone
            document.querySelector('#updateModal [name="salary"]').value = res.data.salary
            document.querySelector('#updateModal [name="truesalary"]').value = res.data.truesalary
            // 性别(单选), 组号(下拉菜单), 籍贯(下拉菜单) 下面渲染
            let inps = document.querySelectorAll('#updateModal [name="sex"]');
            // 循环判断
            for (let i = 0; i < inps.length; i++) {
                // 判断,当前的input的value值,是否和res.data.sex相同
                // 如果相同,当前项被选中,不同就取消选中
                inps[i].checked = inps[i].value === res.data.sex
            }
            // 组号(下拉菜单),省的复杂,比较简单,因为已经有数据了,直接用value赋值就可以
            document.querySelector('#updateModal [name="group"]').value = res.data.group
            document.querySelector('#updateModal [name="province"]').value = res.data.province
            // 市和县赋值比较繁琐;因为他们没有赋值;直接用innerHTML属性赋值
            document.querySelector('#updateModal [name="city"]').innerHTML = `<option value="${res.data.city}">${res.data.city}</option>`
            document.querySelector('#updateModal [name="county"]').innerHTML = `<option value="${res.data.county}">${res.data.county}</option>`
            // type ='hidden'叫做隐藏域,可以隐藏id,将来提交的时候一起获取到,发送给后端
            document.querySelector('#updateModal [name="id"]').value = res.data.id
        }
    });
})

// 需要6:提交修改信息
add('updateModal','put','/student/update','修改')